<template lang="pug">
  div.section-wrapper(:style="styles")
    slot(name="heading")
      HeadingSimple.section-title(v-if="!!title" :title="title")
    slot
</template>

<script>
export default {
  name: "SectionWrapper",
  props: {
    flex: {
      type: [String, Number],
      default: 1,
    },
    title: {
      type: String,
      default: '',
    },
  },
  computed: {
    styles() {
      return {
        'flex': this.flex,
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.section-wrapper{
  display: flex;
  flex-direction: column;
  .section-title{
    margin: rem(20) 0 rem(10);
  }
}
</style>
